<template>
	<div style="width: 100%;height: 80%;">
		<!-- <div class="flex gap-2">
			<el-tag type="success">成品明细</el-tag>
		</div> -->

		<el-table :data="state.dataList" stripe v-loading="state.loading" border  style="width: 100%;height: 100%;" show-summary :header-cell-style="tableStyle.headerCellStyle" :cell-style="tableStyle.cellStyle">
			<el-table-column type="index" label="#" width="80" />
			<el-table-column :label="$t('fg.barcode')" prop="barcode" min-width="150px" show-overflow-tooltip />
			<el-table-column :label="$t('fg.materialCode')" prop="materialCode" width="150px" />
			<el-table-column :label="$t('fg.materialName')" prop="materialName" width="300px" />
			<el-table-column :label="$t('fg.materialSpec')" prop="materialSpec" min-width="150px" />
			<el-table-column :label="$t('fg.unit')" prop="unit" width="150px" />
			<el-table-column :label="$t('fg.currentQty')" prop="currentQty" width="150px" >
				<template #default="scope">
                    <el-tag type="success">
                         {{ scope.row.currentQty }}
                    </el-tag>
                </template>
			</el-table-column>
			<el-table-column :label="$t('fg.finishedStocktime')" prop="finishedStocktime" min-width="150px" />
			<el-table-column :label="$t('fg.locationCode')" prop="locationCode" width="150px" />
		</el-table>
		<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
	</div>
</template>


<script setup lang="ts">
import { BasicTableProps, useTable } from '/@/hooks/table';
import { queryBarcodeDetail } from '/@/api/platform/report/locationdetail';

// 利用props接收父组件传来的code参数
// 定义父组件传过来的值
const props = defineProps({
	code: {
		type: String,
		default: null,
	},
});
const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: { locationCode: props.code },
	pageList: queryBarcodeDetail,
});

// 刷新表格
const refresh = (row: any) => {
    state.queryForm.locationCode = row
    getDataList()
}


// 暴露变量
defineExpose({
    refresh
});

const { sizeChangeHandle, currentChangeHandle,getDataList,tableStyle } = useTable(state);
</script>